<template>
  <view class="my-device-container">
 
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 听诊宝设备信息 -->
      <view class="device-section" @click="goToAudioRecord">
        <view class="device-header">
          <view class="device-icon">🩺</view>
          <text class="device-type">听诊宝</text>
        </view>
        <view class="device-details">
          <view class="detail-row">
            <text class="detail-label">设备品牌:</text>
            <text class="detail-value">汉蒙医疗</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">设备型号:</text>
            <text class="detail-value">28POR</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">设备SN号:</text>
            <text class="detail-value">28899876</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">绑定日期:</text>
            <text class="detail-value">2025-05-20</text>
          </view>
        </view>
      </view>

      <!-- 训练仪设备信息 -->
      <view class="device-section" @click="goToTrainingRecord">
        <view class="device-header">
          <view class="device-icon">📱</view>
          <text class="device-type">训练仪</text>
        </view>
        <view class="device-details">
          <view class="detail-row">
            <text class="detail-label">设备品牌:</text>
            <text class="detail-value">汉蒙医疗</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">设备型号:</text>
            <text class="detail-value">28POR</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">设备SN号:</text>
            <text class="detail-value">28899876</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">绑定日期:</text>
            <text class="detail-value">2025-05-20</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0
    }
  },

  onLoad() {
    this.getSystemInfo()
  },

  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    goBack() {
      uni.navigateBack()
    },

    goToAudioRecord() {
      uni.navigateTo({
        url: '/pages/audioRecord/index'
      })
    },

    goToTrainingRecord() {
      uni.navigateTo({
        url: '/pages/trainingRecord/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-device-container {
  min-height: 100vh;
  background: #F5F5F5;
  position: relative;
}

.status-bar {
  background: #FFFFFF;
}

.my-device-navbar {
  background: #FFFFFF;
  height: 88rpx;
  border-bottom: 1px solid #E5E5E5;

  .navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 32rpx;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 48rpx;
        color: #333333;
        font-weight: bold;
      }
    }

    .nav-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }

    .nav-right {
      display: flex;
      align-items: center;

      .nav-action-btn {
        width: 60rpx;
        height: 60rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16rpx;

        .action-dots,
        .action-location {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
  }
}

.content-area {
  padding: 32rpx;
}

.device-section {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .device-header {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1px solid #F5F5F5;

    .device-icon {
      font-size: 40rpx;
      margin-right: 16rpx;
    }

    .device-type {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .device-details {
    padding: 32rpx;

    .detail-row {
      display: flex;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        font-size: 32rpx;
        color: #666666;
        width: 200rpx;
      }

      .detail-value {
        font-size: 32rpx;
        color: #333333;
        flex: 1;
      }
    }
  }
}
</style>